<template>
  <div class="view-search">
    <div class="search-header">
      <header class="heading">
        <a-layout id="components-layout-demo-top-side-2">
          <a-layout-header class="header" style="background: #fff">
            <div class="logo">
              <a href="">
                <a-icon
                  type="star"
                  style="color: rgba(0, 0, 0, 0.65); margin-right: 8px"
                />
                <span>WeParty</span>
              </a>
            </div>
            <!-- MY -->
            <a-dropdown class="my">
              <a-menu slot="overlay">
                <a-menu-item key="1">
                  <router-link to="login">
                    <a-icon type="user" />
                    个人中心
                  </router-link>
                </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="notification" />
                  消息中心
                </a-menu-item>
                <a-menu-item v-if="isAdminister" key="3">
                <router-link to="/admin">
                  <a-icon type="smile" />
                  管理中心
                </router-link>
              </a-menu-item>
              </a-menu>
              <a-avatar :size="32" icon="user" />
            </a-dropdown>

            <!-- 菜单 -->
            <a-menu mode="horizontal" :style="{ lineHeight: '64px' }">
              <a-menu-item key="1" @click="() => this.$router.back()">
                <a-icon type="left" />
                返回
              </a-menu-item>
              <a-menu-item key="2">
                <router-link to="/home">
                  <a-icon type="home" theme="filled" />
                  主页
                </router-link>
              </a-menu-item>
            </a-menu>
          </a-layout-header>
        </a-layout>
      </header>
      <a-input-search
        :placeholder="searchContent || ''"
        size="large"
        style="width: 40%"
        @search="onSearch"
      />
    </div>
    <div class="search-result-container">
      <header class="search-result-container-header">
        <h2 style="margin: 0 10px 0 0">搜索结果 |</h2>
        <h2>RESULT</h2>
      </header>

      <div style="display: flex; width: 100%">
        <div
          class="search-activities-container"
          style="flex: 1; margin: 0 20px 0 0"
        >
          <a-list
            item-layout="horizontal"
            style="margin: 20px 0 0 0"
            :data-source="searchedShowedActivityList"
          >
            <a-list-item
              class="activity-item"
              slot="renderItem"
              slot-scope="item, index"
              @click="jumpToInfo(item, index)"
            >
              <a-list-item-meta :description="item.description || '暂无信息'">
                <a slot="title">
                  {{ item.title }}
                </a>
                <a-avatar
                  slot="avatar"
                  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                />
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </div>

        <!-- sider -->
        <div class="search-sider" style="width: 20%">
          <a-descriptions
            class="result-info-cobtainer"
            title="Search Info"
            :column="1"
          >
            <a-descriptions-item label="Search">
              {{ resultInfo.activityName || "*" }}
            </a-descriptions-item>
            <a-descriptions-item label="Result Count">
              {{ resultInfo.resultCount }}
            </a-descriptions-item>
            <a-descriptions-item label="Time">
              {{ resultInfo.timeConsuming }} sec
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import RequestUtils from "../../utils/requestUtils";

const PERMISSION_ADMIN = 1;

let searchedShowedActivityList = [
  {
    title: "Ant Design Title 1",
    description: "北洋园 | 没有什么简介",
  },
  {
    title: "Ant Design Title 2",
    description: "北洋园 | 没有什么简介",
  },
  {
    title: "Ant Design Title 3",
    description: "北洋园 | 没有什么简介",
  },
  {
    title: "Ant Design Title 4",
    description: "北洋园 | 没有什么简介",
  },
];
export default {
  data() {
    return {
      searchedShowedActivityList,
      activityList: null,
      isAdminister: sessionStorage.getItem("permission") ? (PERMISSION_ADMIN in JSON.parse(sessionStorage.getItem("permission"))) : false,
      resultInfo: {
        activityName: "*",
        resultCount: 4,
        timeConsuming: (Math.random() / 10).toFixed(2),
        searchContent: null,
      },
    };
  },
  created() {
    this.searchContent = this.$route.params.content || null;
    console.log(this.searchContent);
    // Validate search content
    if (
      this.searchContent == null ||
      this.searchContent.length == 0 ||
      this.searchContent.replace(/(^s*)|(s*$)/g, "").length == 0
    ) {
      return;
    }
    this.requestActivitiesByName(this.searchContent);
  },
  methods: {
    activityList2ShowedActivityList() {
      let showedActivityList = [];
      for (const activity of this.activityList) {
        showedActivityList.push({
          id: activity.activityId,
          title: activity.activityName,
          description:
            activity.activityLocation + " | " + activity.activityProfile,
        });
      }
      return showedActivityList;
    },
    jumpToInfo(showedActivity, index) {
      console.log(index);
      this.$router.push({
        path: `/activities/${showedActivity.id}`,
      });
    },
    onSearch(value) {
      console.log(value);

      // Validate input content
      if (
        value == null ||
        value.length == 0 ||
        value.replace(/(^s*)|(s*$)/g, "").length == 0
      ) {
        this.$message.warning("搜索内容不能为空哦");
        return;
      }

      // Set search result info - activityName
      this.resultInfo.activityName = value;
      // Set searchContent
      this.searchContent = value;
      // Send request
      this.requestActivitiesByName(value);
    },
    requestActivitiesByName(value) {
      let that = this;
      RequestUtils.requestActivitiesByName(
        that,
        value,
        (res) => {
          console.log(res);
          let data = res.data;
          let result = data.result;
          if (res.status == 200) {
            if (data.error_code == 0) {
              // Set activityList and searchedShowedActivityList
              that.activityList = result;
              that.searchedShowedActivityList = that.activityList2ShowedActivityList();
              // Set search result info - resultCount
              that.resultInfo.resultCount =
                that.searchedShowedActivityList.length;
              console.log(that.searchedShowedActivityList);
            } else {
              // Hint error message
              that.$message.error(data.error_message);
            }
          }
        },
        (error) => {
          console.log(error);
          that.$message.error("搜索失败，请稍后重试");
        }
      );
    },
  },
};
</script>
<style lang="less" scope>
.center() {
  justify-content: center;
  align-items: center;
}

.view-search {
  .search-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    .center();
    .heading {
      width: 100%;
      margin: 0 0 3% 0;
    }
  }
  .search-result-container {
    margin: 3% 0 0 0;
    padding: 0 20%;

    .search-result-container-header {
      display: flex;
    }

    .activity-item {
      transition: 0.3s;
      &:hover {
        background: rgba(169, 231, 255, 0.3);
        transform: scale(1.01);
      }
    }

    .search-sider {
      .result-info-cobtainer {
        border: solid 2px whitesmoke;
        border-radius: 10px;
        padding: 10px;
        transition: 0.3s;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}
</style>
